import React from 'react';
import { TrendingUp } from 'lucide-react';
import type { SearchSuggestion } from '../types';

const suggestions: SearchSuggestion[] = [
  { text: "2024年各城市经济排行", category: "经济" },
  { text: "2024年3季度经济排行", category: "经济" },
  { text: "2024年各国经济排行", category: "经济" },
  { text: "2024年人口统计排行", category: "人口" },
  { text: "12月地铁流量统计排行", category: "交通" },
];

interface Props {
  onSelect: (suggestion: string) => void;
}

export function SearchSuggestions({ onSelect }: Props) {
  return (
    <div className="mt-6">
      <div className="flex items-center gap-2 mb-3">
        <TrendingUp className="w-5 h-5 text-gray-600" />
        <span className="text-gray-600">热门搜索</span>
      </div>
      <div className="flex flex-wrap gap-2">
        {suggestions.map((suggestion) => (
          <button
            key={suggestion.text}
            onClick={() => onSelect(suggestion.text)}
            className="px-4 py-2 bg-white border rounded-full hover:bg-gray-50 transition-colors"
          >
            {suggestion.text}
          </button>
        ))}
      </div>
    </div>
  );
}